<template>
  <div class="chart"></div>
</template>

<script setup name="LineBar">
// 线、柱混合图
import * as echarts from 'echarts'
import useResize from '@/components/Charts/hooks/useResize.js'
import { echartsColors, echartLineColors } from '@/components/Charts/style.js'

const { proxy } = getCurrentInstance()
const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        legends: ['实际值', '均值'],
        time: ['3:00', '6:00', '9:00', '12:00', '15:00', '18:00', '21:00'],

        yesterday: [420, 482, 691, 1234, 1500, 720, 610],
        today: [520, 610, 425, 745, 622, 565, 802],
        color: '#333'
      }
    }
  },
  unitNameY: {
    type: String,
    default: ''
  },
  unitNameYTwo: {
    type: String,
    default: ''
  }
})

let chartInstance = null

function chartInit() {
  chartInstance = echarts.init(proxy.$el)

  chartInstance.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['今年', '去年', '同比节能'],
      left: 50
    },
    grid: {
      top: '40px', // 距上边距

      left: '40px', // 距离左边距

      right: '40px', // 距离右边距

      bottom: '25px' // 距离下边距
    },
    xAxis: [
      {
        type: 'category',
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月'
        ],
        axisPointer: {
          type: 'shadow'
        },
        axisLabel: {
          margin: 10,
          fontSize: 12,
          color: '#888888'
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#F1F1F1'
          }
        },
        // 网格样式
        splitLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        name: props.unitNameY,
        nameLocation: 'end',
        nameTextStyle: {
          color: '#9A9A9A',
          fontSize: 12,
          align: 'right'
        },
        min: 0,
        max: 250,
        interval: 50,
        show: true,
        type: 'value',
        axisLabel: {
          formatter: '{value} ',
          show: true,
          color: '#9A9A9A',
          align: 'right'
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#F1F1F1'
          }
        },
        axisTick: {
          show: false
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            // 使用深浅的间隔色
            color: ['#F1F1F1']
          }
        }
      },
      {
        name: props.unitNameYTwo,
        nameLocation: 'end',
        nameTextStyle: {
          color: '#9A9A9A',
          fontSize: 12,
          align: 'left'
        },
        type: 'value',
        show: true,
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          show: true,
          formatter: '{value} ',
          color: '#9A9A9A',
          align: 'left'
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#F1F1F1'
          }
        }
        // axisTick: {
        //   show: false
        // },
        // splitLine: {
        //   show: true
        // },
        // splitArea: {
        //   show: false
        // }
      }
    ],
    series: [
      {
        name: '今年',
        type: 'bar',
        color: '#0070CC',
        barWidth: 10, // 柱图宽度
        data: [
          32.0, 44.9, 57.0, 63.2, 75.6, 76.7, 195.6, 202.2, 72.6, 60.0, 56.4,
          43.3
        ]
      },
      {
        name: '去年',
        type: 'bar',
        color: '#31D2A9',
        barWidth: 10, // 柱图宽度
        data: [
          22.6, 35.9, 49.0, 56.4, 68.7, 70.7, 175.6, 182.2, 68.7, 58.8, 46.0,
          32.3
        ]
      },
      {
        name: '同比节能',
        type: 'line',
        yAxisIndex: 1,
        color: '#FFBD11',
        data: [9.4, 9, 8, 6.8, 6.8, 6.9, 6, 20, 20.0, 3.9, 1.2, 10.4, 11]
      }
    ]
  })
}

onMounted(() => {
  chartInit()
})
// 销毁
onBeforeUnmount(() => {
  chartInstance?.dispose()
})

watch(
  () => props.options,
  () => {
    nextTick(() => {
      chartInit()
    })
  }
)

function resize() {
  chartInstance.resize()
}

useResize(() => {
  resize()
})
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
